<template>
  <div class="container">
    <!-- 操作栏 -->
    <Header :showRefresh="false" @refresh="() => {}">
      <template #leftTitle>
        <router-link to="/event/list">事件列表</router-link>
        <el-icon class="v-align-top"> <arrow-right-bold /> </el-icon>【{{
          route.query.name
        }}】
      </template>
    </Header>
    <div class="page-main">
      <div class="page-main-query con-header">
        <FilterBar :showBack="false" @route="router.go(-1)">
          <template #left>
            <el-select
              v-model="query.httpStatus"
              class="input"
              placeholder="选择状态"
              clearable
              @change="refresh"
            >
              <el-option label="成功" value="200" />
              <el-option label="失败" value="-1" />
            </el-select>
            <el-button type="primary" class="search-btn" @click="reset"
              >重置</el-button>
          </template>
        </FilterBar>
      </div>
      <!-- 表格 -->
      <DynamicTable
        class="table-container"
        :total="total"
        v-model:current="page.current"
        v-model:size="page.size"
        :data="list"
        :columns="tableColumns"
        @pagination="getList"
      />
    </div>
    <Detail v-model="showDetail" :detailInfo="detailInfo" />
  </div>
</template>

<script lang="jsx" setup>
import { ref, onMounted, reactive, toRefs } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import Header from "@/components/Header.vue";
import { ArrowRightBold } from "@element-plus/icons-vue";
import FilterBar from "@/components/FilterBar.vue";
import DynamicTable from "@/components/DynamicTable";
import Detail from "./components/LogDetail.vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { useListManage } from "@/hooks";
import { getEventLog } from "@/api/event";
import { parseTime } from "@/utils/index.js";
import { getOrgTree } from "@/api/system";
import { getAppPageList } from "@/api/application.js";
const props = defineProps();
const emit = defineEmits();
const store = useStore();
const route = useRoute();
const router = useRouter();
const id = route.query.id;
const query = reactive({ evtId: id });
let { page, list, total, refresh, getList, queryChange } = useListManage(
  props,
  emit,
  {
    getItems: getEventLog,
    query: query,
    getDetail: null,
  }
);

const tableColumns = ref([
  { key: "appName", label: "所属应用" },
  { key: "orgName", label: "部门名称" },
  {
    label: "状态",
    render: (h, params) => (
      <span>
        <i v-show={params.row.httpStatus == "200"} class="table-status success">
          ● 成功
        </i>
        <i v-show={params.row.httpStatus !== "200"} class="table-status fail">
          ● 失败
        </i>
      </span>
    ),
  },
  { key: "requestUseTime", label: "调用时长(ms)" },
  {
    label: "请求时间",
    render: (h, params) => <span>{parseTime(params.row.requestTime)}</span>,
  },
  {
    label: "操作",
    fixed: "right",
    width: "200px",
    render: (h, params) => (
      <span>
        {
          <el-button
            type="text"
            size="small"
            onClick={() => getDetailShow(params.row)}
          >
            详情
          </el-button>
        }
      </span>
    ),
  },
]);
const state = reactive({
  appList: [],
  showDetail: false,
  detailInfo: {
    evtId: "",
    appId: "",
  },
  svcId: "",
});
const { appList, showDetail, detailInfo, svcId, options } = toRefs(state);

// 组织结构查询
const orgChange = ($event) => {
  $event ? (query.orgId = $event[$event.length - 1]) : false;
  refresh()
};

// 重置
const reset = () => {
  for (const key in query) {
    if (key !== "evtId") {
      query[key] = "";
    }
  }
  refresh();
};
// 组织列表
const props1 = {
  lazy: true,
  checkStrictly: true,
  async lazyLoad(node, resolve) {
    const { data } = node;
    const res = await getOrgTree({ parentId: data.value });
    const nodes = res.data.map((item) => {
      return {
        value: item.id,
        label: item.name,
      };
    });
    resolve(nodes);
  },
};
// 应用列表
const getAppList = async () => {
  let { data } = await getAppPageList({ current: 1, size: 999 });
  state.appList = data.list;
};
// 详情
const getDetailShow = async (params) => {
  state.detailInfo = params;
  state.showDetail = true;
};
onMounted(() => {
  getList();
});
</script>
<style lang="scss">
.table-status {
  font-style: normal;

  &.success {
    color: #529b2e;
  }

  &.fail {
    color: #ff3a3a;
  }
}
</style>
